<template>
     <section class="select-menu">
        <div class="select-item" :class="{'iconfont active' : orderBy === 'default'}" data-orderBy="default" @click="selectOrder($event)">默认排序</div>
        <div class="select-item" :class="{'iconfont active' : orderBy === 'price_asc'}" data-orderBy="price_asc" @click="selectOrder($event)">
            升序
            <i class="iconfont icon-up1"></i>
        </div>
        <div class="select-item" :class="{'iconfont active' : orderBy === 'price_desc'}" data-orderBy="price_desc" @click="selectOrder($event)">
            降序
            <i class="iconfont icon-down1"></i>
        </div>
        <div class="select-item">
            筛选
            <i class="iconfont icon-shaixuan"></i>
        </div>
        </section>
</template>

<script>
export default {
    data() {
        return {
            orderBy: 'default',
        }
    },
    methods: {
        selectOrder(e) {
             let orderBy = e.currentTarget.getAttribute('data-orderBy')
                if (orderBy === this.orderBy) {
                return
    }
                this.$emit('changeSort',orderBy)
                this.orderBy = orderBy
        }      
    }
    
}
</script>